<template>
    <div>
        <van-pull-refresh v-model="discount.refreshing" @refresh="onRefresh" :disabled="discount.disabled">
            <van-sticky :offset-top="1" class="aui-bg-f">
                <div class="discount aui-bg-f" id="discount">
                    <div class="banner" id="main">
                        <i class="iconfont icon-fanhui aui-ftn18" @click="back"></i>
                        <img src="../../assets/discount/banner.jpg" alt="">
                    </div>
                    <div>
                        <div class="search" @click="fnOpenSearch()">
                            <i class="iconfont icon-sousuo aui-ftn18"></i>
                            <span class="txt">搜索优惠券</span>
                        </div>
                    </div>
                    <div class="tab-main">
                        <van-tabs background="#fff" title-inactive-color="#333" title-active-color="#f50" :line-height="0" :border="false"  @click="fnOpenCate">
                            <van-tab v-for="(item) in tab_items" :key="item.id">
                                <template #title> <div :style="{width: item.width ? item.width : '40px'}" v-text="item.name"></div></template>
                            </van-tab>
                        </van-tabs>
                    </div>
                </div>
            </van-sticky>
            <section class="discount-section">
                <div v-for="(item, index) in discount.items" :key="index">
                        <List :item="item" :cid="tab_items[cur].id"></List>
                </div>
                <div @click="initData()" class="aui-ftn14 aui-text-6 aui-text-center aui-padded-15" v-text="discount.text"></div>
            </section>
        </van-pull-refresh>
    </div>
</template>
<script>
import "@/styles/discount.css"
  import List from './components/list.vue'
  import Discount from '@/service/discount.js'
    export default {
        name: 'nine',
        components: {
            List
        },
        data () {
            return {
                tab_items: [
                    {
                        id: '',
                        name: '全部商品',
                        width: '80px'
                    },
                    {
                        id: 1,
                        name: '女装'
                    },
                    {
                        id: 2,
                        name: '母婴'
                    },
                    {
                        id: 3,
                        name: '美妆'
                    },
                    {
                        id: 4,
                        name: '居家日用',
                        width: '80px'
                    },
                    {
                        id: 5,
                        name: '鞋品'
                    },
                    {
                        id: 6,
                        name: '美食'
                    },
                    {
                        id: 7,
                        name: '文娱车品',
                        width: '80px'
                    },
                    {
                        id: 8,
                        name: '数码家电',
                        width: '80px'
                    },
                    {
                        id: 9,
                        name: '男装'
                    },
                    {
                        id: 10,
                        name: '内衣'
                    },
                    {
                        id: 11,
                        name: '箱包'
                    },
                    {
                        id: 12,
                        name: '配饰'
                    },
                    {
                        id: 13,
                        name: '户外运动',
                        width: '80px'
                    },
                    {
                        id: 14,
                        name: '家装家纺',
                        width: '80px'
                    }
                ],
                cur: 0,
                discount: {
                    loading: false,
                    finished: false,
                    items: [],
                    page: 0,
                    disabled: false,
		            refreshing: false,
                    text: '数据加载中...'
                }
            }
        },
        computed: {
            key(){
                return this.$route.path + Math.random();
            }
        },
        mounted () {
            this.initData()
        },
        methods: {
            //打开搜索页面
            fnOpenSearch () {
                this.utils.fnOpenCommon(this, {name: 'discount_search', params: {cid: this.tab_items[this.cur].id}})
            },
            // 图片预览
            fnPreview (img) {
                this.utils.fnPreviewPic([img])
            },
            // 索引和标题
            fnOpenCate (index, title) {
                this.cur = index;
                this.fnLoadMore();
            },
            initData () {
                let {loading, finished, page, items, text, refreshing, disabled} = this.discount;
                if (!loading && !finished) {
                    loading = true
                    page++
                    text = "数据加载中...";
                    Discount.fnGetDiscountList({p: page, n: 20,cid: this.tab_items[this.cur].id, isToken: false, isLoading: true}).then(res => {
                        // 加载状态结束
                        loading = false;
                        if (res && Array.isArray(res.content) && items.length < 500) {
                            items = items.concat(res.content)
                            text="加载更多数据"
                        } else {
                            finished = true;
                            if (items.length > 0 || items.length > 500) text = '没有更多了'
                        }
                        this.discount = {loading, finished, page, items, text, disabled, refreshing};
                    })
                }
            },
            fnLoadMore: function() {
                this.discount = {
		            refreshing: false,
                    disabled: false,
                    loading: false,
                    finished: false,
                    items: [],
                    page: 0,
                    refreshing: false,
                    text: ''
                }
                this.initData()
            },
            onRefresh() {
                setTimeout(() => {
                    this.fnLoadMore()
                }, 1000);
            }
        }
    }
</script>
